<template>
	<view class="shop">
		<view class="homeDatails">
			<view class="tops">
				<view class="left" @click="back()">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
				<view class="right">
					<image src="@/static/images/biji_ico_share@2x1.png" mode="widthFix"></image>
					<u-icon name="more-dot-fill" color="#fff" size="26"></u-icon>
				</view>
			</view>
		</view>
		<view class="swiper_shop">
			<u-swiper
			:list="shopImages"
			@change="e => currentNum = e.current"
			:autoplay="true"
			class="Simg"
			indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ shopImages.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="bane">
			<swiper
			  :autoplay="false"
			  @change="changeSwiper"
			  :current="currentIndex"
			  class="sw"
			>
			  <swiper-item v-for="(item, index) in shopImages" :key="item.id" class="img6" :style="{background: 'url('+item+')'}">
				<view :id="'content-wrap' + index" class="contimg">
					<image :src="item" mode="widthFix"></image>
				</view>
			  </swiper-item>
			</swiper> 
			<view class="numberLen">{{currentIndex+1}}/{{dataList.length}}</view>		
		</view>
		<view class="swiper_shop_cont">
			<view class="swiper_shop_cont_one">
				<view class="top">
					<view class="flex">
						<text class="lt">{{ shopDetailedata.name }}</text>
						<text class="rt">近30天{{ shopDetailedata.comments }}人打卡</text>
					</view>
					<view class="rate">
						<u-rate :value="4.6" active-color="#F95620" inactive-color="#b2b2b2" gutter="1" readonly></u-rate>
						<text class="red">4.6</text>
						<text class="wen">¥{{ shopDetailedata.avgPrice }}/人</text>
					</view>
					<view class="ddbd">
						<view class="wenzi">
							<image src="@/static/images/dianpu_ico_bangdan@2x.png" mode="widthFix"></image>
							<text>杭州.特色美食</text>
						</view>
						<view class="wenzi2">
							<text>拱墅区好评榜第3名</text>
							<u-icon name="arrow-right" color="#C36D39" size="13"></u-icon>
						</view>
					</view>
					<view class="w1">
						杭州菜 特色小吃
					</view>
					<view class="w2">
						<text>35抵50 | 70抵100</text>
						<text>首次进店9.5折</text>
						<text>打卡笔记送小吃</text>
					</view>
				</view>
				<view class="bom">
					<view class="w3">
						<view class="lt">
							<image src="@/static/images/dianpu_ico_yingyeshijian@2x.png" mode="widthFix"></image>
							<view class="w4">
								<text>营业中</text>
								<text>|</text>
								<text>{{shopDetailedata.openHours}}</text>
							</view>
						</view>
						<view class="rt"><u-icon name="arrow-right" color="#999999" size="13"></u-icon></view>
					</view>
					<view class="w5">
						<view class="lt">
							<image class="imgs" src="@/static/images/dianpu_ico_dingwei@2x.png" mode="widthFix"></image>
							<view class="w6">
								<view class="w7">{{shopDetailedata.address}}</view>
								<view class="w8"><text>距您1.3km，驾车15分钟</text><u-icon name="arrow-right" color="#999999" size="11"></u-icon></view>
							</view>
						</view>
						<view class="rt">
							<view class="dh">
								<image src="@/static/images/dianpu_ico_daohang@2x.png" mode="widthFix"></image>
								<view>导航</view>
							</view>
							<view class="dh">
								<image src="@/static/images/dianpu_ico_phone@2x.png" mode="widthFix"></image>
								<view>电话</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="swiper_shop_cont_two">
				<view class="font35">代金券</view>
				<view class="voucher" v-for="(item,index) in voucherData" :key="index">
					<view class="lt">
						<view class="font31">{{item.title}}</view>
						<view class="font23">{{item.subTitle}}</view>
						<text class="z1">¥<text>{{item.payValue}}</text></text>
						<text class="z2">{{ (item.payValue / item.actualValue) | calculation}}折</text>
					</view>
					<view class="rt">
						<button type="default" v-show="item.beginTime == undefined" @click="snapup(item.id)">抢购</button>
						<button type="default" v-show="item.beginTime != undefined" @click="snapup(item.id)">限时抢购</button>
						<u-line-progress v-show="item.beginTime != undefined" :percentage="85" :showText="false" inactiveColor="#FEEBE2" activeColor="#FF6D05"></u-line-progress>
						<text class="font23" v-show="item.beginTime != undefined">{{item.beginTime | time}}-{{item.endTime | time}}</text>
					</view>
				</view>
				</view>
			<view class="evaluation">
				<view class="eva">
					<view class="lt">评价 <text>（100+）</text></view>
					<view class="rt">（好评99%）<u-icon name="arrow-right" color="#999999" size="13"></u-icon></view>
				</view>
				<view class="lst">
					<text>味道赞</text>
					<text>菜品不错</text>
					<text>停车方便</text>
					<text>菜品很新鲜</text>
				</view>
				<view class="evaluation_swiper">
					<view class="evaluation_swiper_rt">
					<swiper 
						class="swiper" 
						circular 
						next-margin="120rpx"
						indicator-color="#16843F"
						:indicator-dots="indicatorDots" 
						:autoplay="autoplay" 
						:interval="interval"
						:duration="duration"
					>
						<swiper-item>
							<view class="swie">
								<view class="swiebg">
									<view class="sw_img">
										<image src="https://cdn.uviewui.com/uview/album/1.jpg" class="imgs" shape="circle"></image>
										<view>
											<view class="font19">今天喝拿铁</view>
											<view class="font15"><text>打分</text><u-rate :value="4.6" active-color="#F95620" inactive-color="#b2b2b2" gutter="1" size="12" readonly></u-rate></view>
										</view>
									</view>
									<view class="font23">
										豫优社买的券，可以当工作餐吃，虽然价格便宜，但品质十分优秀，没有一点糊弄的意思，好评好评~
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swie">
								<view class="swiebg">
									<view class="sw_img">
										<image src="https://cdn.uviewui.com/uview/album/1.jpg" class="imgs" shape="circle"></image>
										<view>
											<view class="font19">今天喝拿铁</view>
											<view class="font15"><text>打分</text><u-rate :value="4.6" active-color="#F95620" inactive-color="#b2b2b2" gutter="1"  size="12" readonly></u-rate></view>
										</view>
									</view>
									<view class="font23">
										豫优社买的券，可以当工作餐吃，虽然价格便宜，但品质十分优秀，没有一点糊弄的意思，好评好评~
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swie">
								<view class="swiebg">
									<view class="sw_img">
										<image src="https://cdn.uviewui.com/uview/album/1.jpg" class="imgs" shape="circle"></image>
										<view>
											<view class="font19">今天喝拿铁</view>
											<view class="font15"><text>打分</text><u-rate :value="4.6" active-color="#F95620" inactive-color="#b2b2b2" gutter="1" size="12" readonly></u-rate></view>
										</view>
									</view>
									<view class="font23">
										豫优社买的券，可以当工作餐吃，虽然价格便宜，但品质十分优秀，没有一点糊弄的意思，好评好评~
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopImages:[],
				shopid:'',
				shopDetailedata:{},
				voucherData:[],
				indicatorDots: true,
				autoplay: true,
				interval: 20000,
				duration: 500,
				currentNum:1,
				list6: [
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				//滑块的高度(单位px)
			  swiperHeight: 0,
			  //当前索引
			  currentIndex: 0,
			  //列表数据
			  dataList: [
				  {url:'https://cdn.uviewui.com/uview/swiper/swiper2.png'},
				  {url:'https://cdn.uviewui.com/uview/swiper/swiper3.png'},
				  {url:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}
			  ]
			}
		},
		onLoad(args) {
		    //动态设置swiper的高度
		    this.$nextTick(() => {
		      this.setSwiperHeight();
		    });
			let pages = getCurrentPages();
			let len = pages.length;
			let curParam = pages[len - 1].options;
			this.shopid = curParam.id;
			console.log("shopid的值：",this.shopid);
			// 根据商户id查询
			this.merchant(this.shopid)
			// 某个商户的优惠券列表
			this.voucherlist(this.shopid)
		},
		filters:{
			calculation(data){
				let a = data*10;
				return a
			},
			money(data){
				let index = data.indexOf('元')
				let yuan = data.substring(0,index)
				return yuan
			},
			time(data){
				if(data != undefined){
					let i1 = data.indexOf('-')
					let i2 = data.indexOf('T')
					let i3 = data.lastIndexOf('-')
					let rq = data.substring(i1+1,i3)
					let rq2 = data.substring(i3+1,i2)
					let times = rq+'月'+rq2+'日'
					return times
				}
				
			}
		},
		methods: {
			//手动切换题目
			changeSwiper(e) {
			  this.currentIndex = e.detail.current;
			  //动态设置swiper的高度，使用nextTick延时设置
			  this.$nextTick(() => {
				this.setSwiperHeight();
			  });
			},
			//动态设置swiper的高度
			setSwiperHeight() {
			  let element = "#content-wrap" + this.currentIndex;
			  let query = uni.createSelectorQuery().in(this);
			  query.select(element).boundingClientRect();
			  query.exec((res) => {
				if (res && res[0]) {
				  this.swiperHeight = res[0].height;
				}
			  });
			},
			merchant(id){
				uni.request({
					url:'/shop/'+id,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log("根据id",obj.data)
						if(obj.data.success){
							this.shopDetailedata = obj.data.data
							let ig = this.shopDetailedata.images.split(',')
							this.shopImages = ig
						}
					}
				})
			},
			voucherlist(id){
				uni.request({
					url:'/voucher/list/'+this.shopid,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log("根据id查询优惠券",obj.data)
						if(obj.data.success){
							this.voucherData = obj.data.data
						}
					}
				})
			},
			snapup(id){
				uni.request({
					url:'/voucher/buyVoucher/'+id,
					method:'post',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log("抢购",obj.data)
						if(obj.data.success){
							uni.showLoading({
								title: '抢购成功'
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 1000);
						}else{
							uni.showLoading({
								title:obj.data.errorMsg
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 1000);
						}
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss" scoped>
.sw{
	height: 417rpx;
}
.img6{
	background-position: center center !important;
	background-size: cover !important
	
}
.contimg{
	opacity: 0 !important;
}
 .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		 color: #FFFFFF;
		 font-size: 12px;
	 }
}

.homeDatails{
	position: absolute;
	top: 0;
	width: 100%;
	left: 0;
	z-index: 33;
	
	.tops{
		display: flex;
		padding: 12rpx 54rpx;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.img{
				image{
					width: 60rpx;
					height: 60rpx;
					transform: rotate(90deg);
				}
			}
			.man{
				display: flex;
				align-items: center;
				image{
					width: 66rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}
				text{
					color: #222222;
					font-size: 27rpx;
				}
			}
		}
		.right{
			display: flex;
			align-items: center;
			image{
				width: 46rpx;
				margin-right: 36rpx;
			}
		}
	}
}

.Simg{
	height: 417rpx !important;
}

.swiper_shop{
	display: none;
}
.bane{
	position: relative;
	.numberLen{
		position: absolute;
		background: rgba(255,255,255,0.48);
		border-radius: 23rpx;
		backdrop-filter: blur(2px);
		color: #FFFFFF;
		font-size: 23rpx;
		z-index: 32;
		right: 30rpx;
		bottom: 70rpx;
		width: 85rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
	}
}

.swiper_shop_cont{
	padding: 0 30rpx;
	background-color: #F4F4F4;
	.swiper_shop_cont_one{
		background-color: #FFFFFF;
		border-radius: 15rpx;
		position: relative;
		top: -40rpx;
		z-index: 998;
		padding: 0 0 2rpx;
		.top{
			padding: 20rpx 25rpx 20rpx;
			border-bottom: 2rpx solid #F0F0F0;
			.flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;
				.lt{
					color: #252525;
					font-size: 35rpx;
				}
				.rt{
					color: #E66740;
					font-size: 19rpx;
					background: #FFF0E6;
					border-radius: 8rpx;
					padding: 4rpx 15rpx;
				}
			}
			.rate{
				display: flex;
				align-items: center;
				.red{
					color: #F95620;
					font-size: 27rpx;
					margin: 0 19rpx 0 12rpx;
				}
				.wen{
					color: #222222;
					font-size: 23rpx;
				}
			}
			.ddbd{
				display: flex;
				align-items: center;
				margin: 15rpx 0;
				.wenzi{
					position: relative;
					image{
						width: 315rpx;
					}
					text{
						color: #C24930;
						font-size: 23rpx;
						position: absolute;
						position: absolute;
						top: 41%;
						transform: translateY(-50%);
						left: 130rpx;
					}
				}
				.wenzi2{
					display: flex;
					align-items: center;
					margin-left: 16rpx;
					text{
						color: #C36D39;
						font-size: 23rpx;
					}
				}
			}
			.w1{
				color: #666666;
				font-size: 23rpx;
				margin-bottom: 17rpx;
			}
			.w2{
				text{
					border-radius: 8rpx;
					border: 1rpx solid #FF2000;
					color: #FF2000;
					font-size: 19rpx;
					padding: 2rpx 18rpx;
					margin-right: 8rpx;
				}
			}			
		}
		.bom{
			margin: 20rpx 0 20rpx 25rpx;
			.w3{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 25rpx;
				.lt{
					display: flex;
					align-items: center;
					image{
						width:28rpx;
						margin-right: 16rpx;
					}
					.w4{
						font-size: 27rpx;		
						color: #222222;
						text:nth-child(2){
							margin: 0 6rpx;
						}
					}
				}
			}
			.w5{
				margin: 20rpx 0 0;
				.lt{
					display: flex;
					justify-content: space-between;
				}
				display: flex;
				align-items: center;
				justify-content: space-between;
				.imgs{
					width:28rpx;
					margin-right: 16rpx;
				}
				.w7{
					color: #222222;
					font-size: 27rpx;
					margin-bottom: 10rpx;
				}
				.w8{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						color: #666666;
						font-size: 23rpx;
					}
				}
				.rt{
					background: #F7F7F9;
					border-radius: 19rpx 0rpx 0rpx 19rpx;
					display: flex;
					padding: 10rpx 0;
					image{
						width: 28rpx;
					}
					view{
						color: #222222;
						font-size: 23rpx;
					}
					.dh{
						text-align: center;
						padding: 0 24rpx;
						position: relative;
						width: 48px;
						&:last-child::after{
							content: '';
							width: 2rpx;
							height: 33rpx;
							background: #E7E7E7;
							position: absolute;
							left: -1rpx;
							top: 50%;
							margin-top: -11rpx;
							z-index: 2;
						}
					}
				}
			}
		}
	}
}
.swiper_shop_cont_two{
	padding-bottom: 1px;
	.font35{
		color: #252525;
		font-size: 35rpx;
	}
	.voucher{
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		// padding: 25rpx 25rpx;
		margin-bottom: 20rpx;
		.lt{
			width: 67%;
			border-right: #E7E7E7 1px dashed;
			padding: 25rpx 0;
			position: relative;
			&::after{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #F4F4F4;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #F4F4F4;
				position: absolute;
				bottom: -10rpx;
				right: -10rpx;
			}
			.font31{
				color: #252525;
				font-size:31rpx;
			}
			.font23{
				color: #666666;
				font-size: 23rpx;
				margin: 6rpx 0 20rpx;
			}
			.z1{
				color: #F95620;
				font-size: 27rpx;
				margin-right: 15rpx;
				text{
					font-size: 38rpx;
				}
			}
			.z2{
				font-size: 19rpx;
				color: #F95620;
				border: 1px solid #F95620;
				border-radius: 10rpx;
				padding: 4rpx 12rpx;
			}
			
		}
		.rt{
			width: 33%;
			padding: 25rpx;
			text-align: center;
			button{
				// width: 123rpx;
				height: 58rpx;
				background: linear-gradient(180deg, #F57B3E 0%, #F9551F 100%);
				box-shadow: 0rpx 10rpx 23rpx -6rpx #F95822;
				border-radius: 35rpx;
				color: #FFFFFF;
				font-size: 23rpx;
				margin-bottom: 30rpx;
			}
			.font23{
				font-size: 23rpx;
				color: #999999;
			}
		}
	}
}

.evaluation{
	background: #FFFFFF;
	border-radius: 15rpx 15rpx 0 0;
	.eva{
		display: flex;
		justify-content: space-between;
		padding: 25rpx 25rpx 18rpx;
		.lt{
			color: #252525;
			font-size: 35rpx;
			text{
				color: #666666;
				font-size: 23rpx;
			}
		}
		.rt{
			color: #666666;
			font-size: 23rpx;
			display: flex;
			align-items: center;
		}
	}
	.lst{
		padding:0 25rpx;
		margin-bottom: 20rpx;
		text{
			color: #E66740;
			font-size: 23rpx;
			background: #FFF0E6;
			border-radius: 22rpx;
			padding: 6rpx 15rpx;
			margin-right: 18rpx;
		}
	}
	.swie{
		.swiebg{
			background: #F3F9F6;
			border-radius: 12rpx;
			padding: 15rpx 10rpx;
		}
		padding: 0 10rpx;
		// height: 360rpx;
		.font23{
			color: #222222;
			line-height: 1.5;
			font-size: 23rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; 
			-webkit-box-orient: vertical;
		}
	}
	.sw_img{
		display: flex;
		align-items: center;
		margin-bottom: 14rpx;
		.imgs{
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
			margin-right: 12rpx;
		}
		.font19{
			color: #666666;
			font-size: 19rpx;
		}
		.font15{
			color: #666666;
			font-size: 15rpx;
			display: flex;
			align-items: center;
		}
	}
	
}
.evaluation_swiper{
	padding-left: 10rpx;
	.swiper{
		height: 125px !important;
	}
}

</style>

